<template>
  <div>
    <el-select v-model="form.groupId" size="medium" :placeholder="`请选择${module.label}所属分组`">
      <el-option v-for="item in categoryList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
    </el-select>
    <br />
    <div class="gray flex align-center">
      <span class="margin-right-xs">给{{ module.label }}设置分组，便于后续统计</span>
      <el-popover placement="bottom" width="300" trigger="click">
        <el-link slot="reference" class="trigger" :underline="false">管理分组</el-link>
        <ul class="margin-bottom">
          <li class="flex justify-between margin-bottom-xs" v-for="item in categoryList" :key="item.id">
            <span>{{ item.groupName }}</span>
            <i @click="onCategoryRemove(item.id)" v-if="item.id !== 0" class="margin-left el-icon-delete"></i>
          </li>
        </ul>
        <el-button v-if="!visible" size="mini" @click="visible = true">新建</el-button>
        <div class="flex" v-else>
          <el-input style="width: 160px" v-focus v-model.trim="value" size="small"></el-input>
          <el-link
            class="margin-lr-sm"
            type="primary"
            :underline="false"
            @click="onCategoryCreate"
            :disabled="loading || !value"
            >创建</el-link
          >
          <el-link
            :underline="false"
            @click="
              visible = false;
              value = '';
            "
            >取消</el-link
          >
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { getMaterialCategorys, createMaterialCategory, deleteMaterialCategory } from "@/api/material/category";
export default {
  name: "materialGroup",
  props: {
    form: {
      type: Object,
      required: true
    },
    module: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      categoryList: [],
      loading: false,
      visible: false,
      value: ""
    };
  },
  created() {
    getMaterialCategorys(this.module.value).then(res => {
      if (res.success) {
        this.categoryList = res.voList;
      }
    });
  },
  methods: {
    // 移除分类
    onCategoryRemove(id) {
      this.$confirm("确定要删除该项？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteMaterialCategory({ id }).then(res => {
          if (res.success) {
            this.$message({
              message: "删除成功！",
              type: "success"
            });
            if (this.form.groupId === id) this.form.groupId = null;
            this.categoryList = this.categoryList.filter(item => item.id != id);
          }
        });
      });
    },
    // 创建分类
    onCategoryCreate() {
      this.loading = true;
      createMaterialCategory({
        materialType: this.module.value,
        groupName: this.value
      })
        .then(res => {
          if (res.success) {
            this.$message({
              message: "创建成功！",
              type: "success"
            });
            this.categoryList.push(res.vo);
            this.visible = false;
            this.value = "";
          }
        })
        .finally(() => (this.loading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.trigger {
  color: $txt-deep-gray;
}
</style>
